<template>
	<div class="back_content_page">
		<div class="header">
			<van-nav-bar
				title="订单详情"
				left-arrow
				@click-left="onClickLeft"
        right-text="取消订单"
        @click-right="onClickRight"

				/>
		</div>
	<div style="overflow: hidden;height: 83vh;">

		<div class="iMG_content">

      <div class="show_add_c">



        <!--地址的 展示-->
          <p class="teach_add" >
            <span>{{orderForm.addr_name}}</span>
            <span>{{orderForm.addr_mobile}}</span>
          </p>

        <p style="font-weight: bold" >
          <van-icon name="location-o"  style="vertical-align: middle;color: #E7E7E7"/>
          <span style="margin: 0;padding: 0">{{orderForm.addr_address}} {{orderForm.addr_details}}</span>
        </p>

      </div>


			<p style="margin-bottom: 1.5vh"><span>全部商品称重后统一进行结算</span></p>

		</div>

		<div class="share_content" v-for="(item,i) in orderForm.order_details" :key="i">
			<div>
				<p>
					<span style="font-size: 16px;">{{item.sec_name}}</span>
				</p>
				<p class="p_content_item">
					<span>{{item.three_name}}
						<span style="float: left;">
							规格
						</span>
					</span>
					<span style="color: #FF4242;float: right;margin-right: 4vw;">
						<span style="color: #FF4242FF;padding-right: 2vh;">
							{{item.actual_integral}}积分
						</span>

					</span>
				</p>
			</div>
		</div>


		<div class="Input_content">
			<van-cell title="预约时间" to="" style="padding: 10px 12px;" >
				<span>{{orderForm.reservation_day}} {{orderForm.reservation_time}}</span>
			</van-cell>
			<van-cell title="留言备注" style="padding: 10px 12px;">
				<van-cell-group>
          <van-field v-model="orderForm.ro_remark" placeholder="可描述商品状态、特殊要求等" readonly />
        </van-cell-group>

			</van-cell>
			<van-cell title="上传图片" style="padding: 10px 12px;" >
				<span>收回物品放在一起拍照上传</span>
			</van-cell>

			<div class="Img_file_list" style="display: flex;justify-content:flex-start">
        <img style="width:20vw;height:10vh;margin-right: 10px;" v-for="(item,i) in fileList" :key="i" :src="item" >
				<!--<van-uploader
			 	  v-model="fileList"
				  multiple
				  :max-count="4"
				/>-->
			</div>

		</div>


			<!--底部-->
			<div class="footer_content">
				<div class="footer_one">
					<p style="color: #CCCCCC;font-weight: normal;font-size: 14px;">成交价格以实际评估为准</p>
				</div>
				<div class="footer_two">
					<van-button round type="default"  disabled>{{orderForm.ro_status | formatStatus}}</van-button>
				</div>
			</div>
		</div>


	</div>
</template>
<script>
	//组件传参
	import SlideVerify from '@/components/SlideVerify';
  import {format} from '../../utils/format.js'
//	import {comments} from '@/components/comments'
  import { Dialog } from 'vant';
	export default {
	  data() {
	    return {
          orderId:'',
          orderForm:'',
          fileList:[]
		    };

	  },
    mounted(){

        const that = this;
        that.orderId = that.$route.query.orderId;
        let local_user = localStorage.getItem("user");
        if (local_user != undefined && local_user != "undefined") {
            let user = JSON.parse(local_user);
            that.user = user;
        }
        that.LookOrderDetails();


    },
      filters:{

          formatStatus(status){

              if(status=='0' ){
                  return "已下单"
              }else if(status=='1'){
                  return "已抢单2"
              }else if(status=='2'){
                  return "已成功回收"
              }else if(status=='3'){
                  return "已拒绝回收"
              }
              return "";
          },


      },
	   methods:{

         onClickRight(){
             Dialog.confirm({

                 message: '是否取消订单'
             }).then(() => {
                 // on confirm
                 const  that = this;
                 that.$sendRequest('/RecoveryRelivery/deleteDeliver_order',"aId="+that.orderId).then(function(res){
                     if(res.data.code ==0){
                         that.$router.push({
                             path:'/listmore'
                         })

                     }else if(res.data.code ==2){

                     }
                 })

             }).catch(() => {
                 // on cancel
             });
         },
         LookOrderDetails(){
             const  that = this;
             that.$sendRequest('/RecoveryRelivery/LookOrderDetails',"aId="+that.orderId).then(function(res){
                 if(res.data.code ==0){
                    console.log(res.data.result.orderForm);
					that.orderForm = res.data.result.orderForm;
					if(that.orderForm.ro_status>1){
						document.querySelector('.van-nav-bar__text').style.display='none'
					}
                    that.fileList = res.data.result.orderForm.pic_urls.split(",");
                    console.log(that.fileList);
                 }else if(res.data.code ==2){

                 }
             })
         },


		   	onClickLeft(){
            this.$router.back(-1);
		   	},


	   }
   };
</script>
<style scoped="scoped">
  .Input_content >>> .van-field__control{
    text-align: right;
  }
  .teach_add{

    font-family:PingFang SC;
    font-weight:600;
    color:#000000;
    padding-top: 1.5vh;
  }
  .teach_add span{
    font-weight: bold;;
    font-size:14px !important;
  }
  .show_add_c{
    margin-top: 1vh;
    height: 13vh;
    padding: 2vw;
    background-image: url("../../assets/address.png");
    background-size:100%;
    background-repeat: no-repeat;
  }
	.back_content_page{
		text-align: left !important;
	}
	.Input_content{
		margin-bottom: 21vh;
	}
  .add_adress_con{
    text-align: center;
    vertical-align: middle;
    font-family:PingFang SC;
    font-weight:600;
    color:rgba(51,51,51,1);
    line-height:60px;
  }
  .Input_content >>> [class*=van-hairline]::after{
  	border: 0 solid #FFFFFF;
  }
	p{
		margin: 0;
		padding: 0;
	}
	.add_address{
		position: absolute;
		top:50%;
		left: 50%;
	}
	.help_content >>> .van-cell__title{
		text-align: left;
		padding-left: 3vh;
	}
	.help_content>>>.van-collapse-item__content{
		text-align: left;
		padding-left: 5.4vh;
	}
	.chan_question{
		margin-top: 1vh;
		text-align: left;
	    padding-left: 3vh;
	    color: #000;
	    font-weight: 600;
	    background: #FFFFFF;
	    padding: 1vh;
	}
	.back_content_page{
		background: rgb(245,245,245);
	}
	.back_content_page >>> .van-tabs__content{
		background: #fff;
	    text-align: left;
	    padding: 3vh;
	}
	.type_xing{
		color: #CCCCCC;
		font-size: 14px;
	}
	.back_content_page >>> .van-button{
		margin-bottom: 1vh;
		margin-top: 1vh;
	}
	.footer_content{
	    position: fixed;
	    width: 100%;
	    bottom: 0;
		align-items: center;
		background: #FFFFFF;
		padding-top: 1vh;
		display: flex;
		justify-content: space-around;

	}
	.footer_one p{
		font-size: 15px;
		font-weight: bold;
		color: #000000;
	}
	.footer_one p span{
		color: rgb(255,66,66);
	}
	.footer_content >>> .van-button__text{
		padding: 0 5vh;
	}
	.footer_content >>>.van-button{
		background: #4C9FFD;
		color: #FFFFFF;
	}
	.iMG_content img{
		width: 100%;
		margin-top: 1vh;
	}

	.iMG_content p{
		text-align: left;
		 margin-top: 0.5vh;
	    margin-bottom: 0.5vh;
	}
	.iMG_content p span{
		color: #666666;

	    margin-left: 1vw;
	    font-size: 12px;

	}
	.share_content{
		width: 100%;
		background: #FFFFFF;
		padding-left: 1vh;
		display: flex;
		border-bottom: 1px solid #F6F6F6;
		justify-content: space-between;

	}
	.p_content_item{
		width: 100%;
	}
	.share_content div{
		width: 100%;
	}
	.share_content div{
		margin: 1.5vh;
    font-size: 12px;
	}
	.p_content_item{

		margin-top: 1vh;
	}
	.p_content_item span:nth-child(1){
		color: #CCCCCC;
	}
	.add_content{
		height: 6vh;
		line-height: 6vh;
		background: #FFFFFF;
		text-align: center;
		font-weight: bold;
	}
	.Img_file_list{
		background: #FFFFFF;
		padding: 12px;
	}
	.van-icon-arrow-left:before {
		color: #2c3e50;
	}
 </style>

